<template>
	<view class="register-container">
		<view class="register-header">
			<text class="welcome-text">新用户注册</text>
			<text class="register-prompt">请填写以下信息完成注册</text>
		</view>
		<view class="register-form">
			<view class="form-item">
				<text class="label">账号</text>
				<input v-model="formData.username" placeholder="请设置账号" class="input" />
				<text v-if="errors.username" class="error-text">{{ errors.username }}</text>
			</view>
			<view class="form-item">
				<text class="label">密码</text>
				<view class="password-container">
					<input v-model="formData.password" placeholder="请设置密码" password :type="showPassword ? 'text' : 'password'" class="input" />
					<text class="eye-icon" @click="togglePasswordVisibility">👁</text>
				</view>
				<text v-if="errors.password" class="error-text">{{ errors.password }}</text>
			</view>
			<view class="form-item">
				<text class="label">确认密码</text>
				<view class="password-container">
					<input v-model="formData.confirmPassword" placeholder="请再次输入密码" password :type="showConfirmPassword ? 'text' : 'password'" class="input" />
					<text class="eye-icon" @click="toggleConfirmPasswordVisibility">👁</text>
				</view>
				<text v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</text>
			</view>
			<view class="form-item">
				<text class="label">邮箱</text>
				<input v-model="formData.email" placeholder="请输入邮箱" class="input" />
				<text v-if="errors.email" class="error-text">{{ errors.email }}</text>
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<input v-model="formData.phone" placeholder="请输入手机号" class="input" />
				<text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>
			</view>
			<view class="form-item">
				<button @click="handleRegister" :disabled="isLoading" class="register-btn">{{ isLoading ? '注册中...' : '注册' }}</button>
			</view>
			<view class="form-footer">
				<text class="login-link" @click="gotoLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { userApi } from '@/common/api'

// 表单数据
const formData = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	email: '',
	phone: '',
	avatar: ''
})

// 错误提示
const errors = reactive({
	username: '',
	password: '',
	confirmPassword: '',
	email: '',
	phone: ''
})

// 加载状态
const isLoading = ref(false)

// 密码可见性状态
const showPassword = ref(false)
const showConfirmPassword = ref(false)

// 切换密码可见性
const togglePasswordVisibility = () => {
	showPassword.value = !showPassword.value
}

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
	showConfirmPassword.value = !showConfirmPassword.value
}

// 表单验证
const validateForm = () => {
	let isValid = true
	
	// 清空所有错误提示
	for (const key in errors) {
		errors[key] = ''
	}
	
	// 验证用户名
	if (!formData.username) {
		errors.username = '请输入账号'
		isValid = false
	} else if (formData.username.length < 4 || formData.username.length > 20) {
		errors.username = '账号长度应为4-20个字符'
		isValid = false
	}
	
	// 验证密码
	if (!formData.password) {
		errors.password = '请输入密码'
		isValid = false
	} else if (formData.password.length < 6) {
		errors.password = '密码长度至少为6个字符'
		isValid = false
	}
	
	// 验证确认密码
	if (!formData.confirmPassword) {
		errors.confirmPassword = '请确认密码'
		isValid = false
	} else if (formData.confirmPassword !== formData.password) {
		errors.confirmPassword = '两次输入的密码不一致'
		isValid = false
	}
	
	// 验证邮箱
	if (!formData.email) {
		errors.email = '请输入邮箱'
		isValid = false
	} else {
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(formData.email)) {
			errors.email = '请输入有效的邮箱地址'
			isValid = false
		}
	}
	
	// 验证手机号
	if (!formData.phone) {
		errors.phone = '请输入手机号'
		isValid = false
	} else {
		const phoneRegex = /^1[3-9]\d{9}$/
		if (!phoneRegex.test(formData.phone)) {
			errors.phone = '请输入有效的手机号'
			isValid = false
		}
	}
	
	return isValid
}

// 注册功能
const handleRegister = async () => {
	// 表单验证
	if (!validateForm()) {
		return
	}
	
	// 设置加载状态
	isLoading.value = true
	
	try {
		// 准备请求数据
		const requestData = {
			username: formData.username,
			password: formData.password,
			email: formData.email,
			phone: formData.phone,
			avatar: formData.avatar || ''
		}
		
		// 调用注册接口
		const res = await userApi.register(requestData)
		
		// 显示成功提示
		uni.showToast({
			title: '注册成功',
			icon: 'success',
			duration: 2000
		})
		
		// 延迟后跳转到登录页
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}, 2000)
	} catch (error) {
		// 显示错误提示
		// 调试输出error对象，了解其结构
		// console.log('注册错误详情:', error)
		
		// 根据后端返回的错误格式，正确提取message字段
		// 可能的错误格式: { message: '错误信息' } 或 error.message 或 error.response.data.message
		let errorMessage = '请稍后重试'
		
		if (error && typeof error === 'object') {
			// 直接从error对象获取message
			if (error.message) {
				errorMessage = error.message
			} 
			// 可能错误信息在error.data中
			else if (error.data && error.data.message) {
				errorMessage = error.data.message
			}
		} 
		// 如果error是字符串
		else if (typeof error === 'string') {
			errorMessage = error
		}
		
		uni.showModal({
			title: '注册失败',
			content: errorMessage,
			showCancel: false
		})
	} finally {
		// 恢复加载状态
		isLoading.value = false
	}
}

// 跳转到登录页
const gotoLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}
</script>

<style lang="scss" scoped>
.register-container {
	padding: 60rpx 40rpx 40rpx;
	background-color: #ffffff;
	height: 100vh;
	display: flex;
	flex-direction: column;

	.register-header {
		margin-bottom: 60rpx;

		.welcome-text {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-bottom: 10rpx;
		}

		.register-prompt {
			font-size: 28rpx;
			color: #666666;
			display: block;
		}
	}

	.register-form {
		flex: 1;

		.form-item {
			margin-bottom: 30rpx;

			.label {
				display: block;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 10rpx;
				font-weight: 500;
			}

			.input {
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #e5e5e5;
				font-size: 28rpx;
				color: #333333;
				padding: 0;
			}

			.password-container {
				display: flex;
				align-items: center;
				position: relative;

				.input {
					flex: 1;
					padding-right: 50rpx;
				}

				.eye-icon {
					position: absolute;
					right: 10rpx;
					font-size: 32rpx;
					color: #999999;
				}
			}

			.error-text {
				font-size: 24rpx;
				color: #ff4444;
				margin-top: 6rpx;
				display: block;
			}

			.register-btn {
				width: 100%;
				height: 90rpx;
				background-color: #1e88e5;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 45rpx;
				line-height: 90rpx;
				margin-top: 40rpx;

				&:disabled {
					background-color: #90caf9;
				}
			}
		}

		.form-footer {
			text-align: center;
			margin-top: 40rpx;

			.login-link {
				font-size: 28rpx;
				color: #1e88e5;
			}
		}
	}
}
</style>